<template>
  <view>

    <!-- 搜索 -->
    <!-- 使用自定义的搜索组件 -->
    <my-search placeholder="搜索您想了解的面试问题" @confirm="search"></my-search>
    <!--    <view class="search">
      <view class="search-box">
        <uni-search-bar @confirm="search" clearButton="auto" cancelButton="none" placeholder="搜索您想了解的面试问题"
          bgColor="#EEEEEE">
        </uni-search-bar>
      </view>
    </view> -->

    <!-- 轮播区 -->
    <view class="swiper-main">
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
        <swiper-item v-for="(item, i) in swiperList" :key="i">
          <view class="swiper-item">
            <image :src="item.image_src"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 金刚区 -->
    <view class="nav-list">
      <view v-for="(item, i) in navList" :key="i" class="nav-item" @click="gotoList(item)">
        <view>
          <image :src="item.imgUrl"></image>
        </view>
        <view><text>{{item.name}}</text></view>
      </view>
    </view>

    <!-- 分类列表 -->
    <!--    <view>
      <view class="cate-1">
        <view class="cate-title">
          <view><text class="cate-title-t1">Java专题</text></view>
          <view><text class="cate-title-t2">更多></text></view>
        </view>
      </view>
      <view class="cate-2">
        <view class="cate-content">
          <view>
            <view class="cate-content-1">
              <image src="/static/home_cates/java-1.png"></image>
              <view class="cate-content-title">Java基础</view>
              <view class="cate-content-num">85+</view>
            </view>
          </view>
          <view>
            <view class="cate-content-1">
              <image src="/static/home_cates/java-2.png"></image>
              <view class="cate-content-title">Java多线程</view>
              <view class="cate-content-num">52+</view>
            </view>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 分类列表 -->
    <view v-for="(item, i) in cateList" :key="i">
      <view>
        <view class="cate-1">
          <view class="cate-title">
            <view><text class="cate-title-t1">{{item.name}}</text></view>
            <view :data-cateitem="item" @click="gotoCateList"><text class="cate-title-t2">更多></text></view>
          </view>
        </view>
        <view class="cate-2">
          <view class="cate-content">
            <view v-for="(itemj, j) in item.childs" :key="j" v-if="j < 2">
              <view class="cate-content-1" @click="gotoList(itemj)">
                <image :src="itemj.imgUrl"></image>
                <view class="cate-content-title">{{itemj.name}}</view>
                <view class="cate-content-num">{{itemj.count}}+</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 轮播图
        swiperList: [{
            image_src: "/static/swiper/swiper.png"
          },
          {
            image_src: "/static/swiper/swiper.png"
          }
        ],
        // 金刚区
        navList: [],
        // 分类列表
        cateList: []
      };
    },
    onLoad(options) {
      this.getHomeData()
    },
    methods: {
      search(res) {
        // 调用API页面跳转
        uni.navigateTo({
          // 指定详情页面的 URL 地址，并传递 goods_id 参数
          url: '/pages/searchlist/searchlist?query=' + res.value
        })
      },
      // 跳转分类列表页
      gotoCateList(e) {
        uni.navigateTo({
          url: '/pages/catelist/catelist?item=' + JSON.stringify(e.currentTarget.dataset.cateitem)
        })
      },
      // 跳转列表页面
      gotoList(item) {
        var cateid = item.id;
        // 调用API页面跳转
        uni.navigateTo({
          // 指定详情页面的 URL 地址，并传递 goods_id 参数
          url: '/pages/list/list?cateId=' + cateid
        })
      },
      // 查询金刚区和分类列表数据
      getHomeData() {
        var that = this;
        uni.request({
          url: this.$config.baseApi + '/com/wx/data/homeData',
          method: 'get',
          data: {},
          success: (res) => {
            that.$data.navList = res.data.navList;
            that.$data.cateList = res.data.cateList;
          }
        });
      },
    }
  }
</script>

<style scoped>
  // 修改uni-search-bar样式
  /deep/ .uni-searchbar {
    padding-left: 0;
    padding-right: 0;
  }
</style>

<style lang="scss">
  // .search {
  //   height: 126rpx;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // }

  // .search-box {
  //   width: 686rpx;
  //   // height: 70rpx;
  //   // border-radius: 15px;
  //   // background-color: #E8E8E8;
  //   // //border: 2rpx solid #A6A6A6;
  //   // display: flex;
  //   // align-items: center;
  // }

  // .search-box text {
  //   font-size: 28rpx;
  //   color: #333333;
  //   padding-left: 20rpx;
  // }

  .swiper-main {
    display: flex;
    justify-content: center;
  }

  swiper {
    width: 686rpx;
    height: 240rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav-list {
    display: flex;
    justify-content: space-around;
  }

  .nav-item view {
    display: flex;
    justify-content: center;
  }

  .nav-item image {
    width: 84rpx;
    height: 84rpx;
    padding-top: 24rpx;
  }

  .nav-item text {
    font-size: 28rpx;
    color: #808080;
    padding-top: 24rpx;
  }

  .cate-1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cate-title {
    width: 686rpx;
    height: 112rpx;
    display: flex;
    align-items: center;
  }

  .cate-title view {
    width: 343rpx;
  }

  .cate-title-t1 {
    font-size: 28rpx;
    color: #808080;
  }

  .cate-title-t2 {
    font-size: 24rpx;
    color: #808080;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .cate-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .cate-content image {
    display: block;
    width: 326rpx;
    height: 164rpx;
  }

  .cate-content-1 {
    display: flex;
    position: relative;
  }

  .cate-title-t1 image {
    position: absolute;
  }

  .cate-content-title {
    position: absolute;
    top: 30rpx;
    left: 40rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }

  .cate-content-num {
    position: absolute;
    top: 90rpx;
    left: 40rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }
</style>